<script setup>
import { ref } from 'vue'
import TagInput from '@/components/TagInput/TagInput.vue'

// 响应式数据
const basicTags = ref(['示例标签1', '示例标签2'])
const validatedTags = ref(['示例标签1'])
const customStyledTags = ref(['示例标签1'])
const multiSeparatorTags = ref(['示例标签1'])
const autocompleteTags = ref(['示例标签1'])

// 处理输入事件
const handleInput = (newTags) => {
  console.log('当前标签:', newTags)
  // 这里可以添加其他逻辑，比如更新状态或进行验证
}
</script>

<template>
  <div class="tag-input-demo">
    <h1>TagInput 标签输入组件示例</h1>

    <div class="demo-section">
      <h2>基本用法</h2>
      <TagInput v-model="basicTags" placeholder="输入标签..." />
    </div>

    <div class="divider"></div>

    <div class="demo-section">
      <h2>带验证的标签</h2>
      <TagInput
          v-model="validatedTags"
          :max-tags="5"
          :min-tags="2"
          :pattern="/^[a-zA-Z]+$/"
          placeholder="输入字母标签..."
      />
      <p class="description">最多5个标签，至少2个标签，且只能输入字母。</p>
    </div>

    <div class="divider"></div>

    <div class="demo-section">
      <h2>自定义样式</h2>
      <TagInput
          v-model="customStyledTags"
          size="large"
          :input-style="{ border: '2px solid #4CAF50' }"
          :tag-style="{ background: '#4CAF50', color: 'white' }"
      />
      <p class="description">自定义输入框和标签样式。</p>
    </div>

    <div class="divider"></div>

    <div class="demo-section">
      <h2>多分隔符,可以是[',', ' ', ';']</h2>
      <TagInput
          v-model="multiSeparatorTags"
          :separator="[',', ' ', ';']"
          :allow-duplicates="true"
      />
      <p class="description">支持多种分隔符，允许重复标签。</p>
    </div>

    <div class="divider"></div>

    <div class="demo-section">
      <h2>带自动完成</h2>
      <TagInput
          v-model="autocompleteTags"
          @input="handleInput"
          :max-length="20"
      />
      <p class="description">输入时会显示自动完成建议。</p>
    </div>
  </div>
</template>

<style scoped>
.tag-input-demo {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
}

.demo-section {
  margin-bottom: 40px;
  padding: 20px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

h2 {
  font-size: 18px;
  color: #34495e;
  margin-bottom: 16px;
}

.description {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

.divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 20px 0;
}
</style>